/**
 * 路由器的工作模式:
 * 1. history 模式
 *  - vue2: mode: 'history'
 *  - vue3: history: createWebHistory()
 *  - React: BrowserRouter
 * 优点: URL 更加美观不带有 #, 更接近传统网站 URL.
 * 缺点: 后期项目上线, 需要服务端配合处理路径问题, 否则刷新会有 404 错误.
 * try_files $uri $uri/ /index.html
 * toC 项目常用
 * 
 * 2. hash 模式
 *  - vue2: mode: 'hash'
 *  - vue3: history: createWebHashHistory
 *  - React
 * 优点: 兼容性更好, 因为不需要服务器端处理路径.
 * 缺点: URL 带有 # 不太美观, 且在 SEO 优化方面相对较差.
 * toB 后端使用
 */
// 创建一个路由器, 并暴露出去

// 第一步: 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 引入一个个可能要呈现的组件:
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

// 第二步: 创建路由器
const router = createRouter({
  history: createWebHistory(),  // 路由器的工作模式
  routes: [ // 一个个的路由规则
    {
      path: '/home',
      component: Home,
    },
    {
      path: '/news',
      component: News,
    },
    {
      path: '/about',
      component: About,
    },
  ],
})

// 暴露出去 router
export default router;